
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<body >	
	<div ng-app="myApp" ng-controller="myCtrl">
		Name1 :<input type="text" ng-model="firstName">
		Name2 :<input type="text" ng-model="lastName">
		<p><h2>{{fullName()}}</h2></p>

		<br>
		<input type="text" ng-model="test" >
		<br>
		<ul>
			<li ng-repeat="x in names|filter:test|orderBy:name">
				{{x.name+" "+x.country}}
			</li>
		</ul>
		<p >{{url}}</p>
		<select ng-model="selectName" ng-options="x.name for x in names"></select>
		<br>
		<select>
			<option ng-repeat="x in names">{{x.name}}</option>
		</select>
		<p>{{ajaxVal}}</p> 

		<select ng-model="selectSite">
			<option ng-repeat="x in sites">{{x.site}}</option>
		</select>
		<p>{{selectSite}}</p>
		<select ng-model ="selectSite2" ng-options="y for (x,y) in sites2">
			
		</select>
		<p>Your Choose: {{selectSite2}}	</p>

		<table>
			
			<tr ng-repeat="x in names">
				<td>{{$index+1}}</td>
				<td>{{x.name}}</td>
				<td>{{x.country}}</td>
			</tr>
		</table>
		<br>

		<button ng-click="count = count + 1">点我！</button>

		<p>{{ count }}</p>
		<br>
		<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
		 
		<div ng-hide="myCheck"></div>
	</div>
</body>
<script type="text/javascript" src="/home/mercy/Downloads/src/angular-1.5.5/angular-animate.min.js"></script>

<script type="text/javascript" src="/home/mercy/Downloads/src/angular-1.5.5/angular.min.js"></script>

<script src="static/js/controller.js" type="text/javascript" charset="utf-8" ></script>

</head>

</html>

<!--
	ng-app
	ng-model 指令根据表单域的状态添加/移除以下类：
		ng-empty
		ng-not-empty
		ng-touched
		ng-untouched
		ng-valid
		ng-invalid
		ng-dirty
		ng-pending
		ng-pristine
	ng-init: init paramter,not frequently for use
	ng-bind
	ng-repeat:
	ng-include
	app.directive:
		restrict 值可以是以下几种:
		E 只限元素名使用
		A 只限属性使用
		C 只限类名使用
		M 只限注释使用
	$scope:curren controller
	$rootScope: every controllers's bridge

	过滤器	          描述
	currency	格式化数字为货币格式。
	filter	    从数组项中选择一个子集。
	lowercase	格式化字符串为小写。
	orderBy	    根据某个表达式排列数组。
	uppercase	格式化字符串为大写。

	service:  在 AngularJS 中，服务是一个函数或对象
		$location
		$http
		$timeout
		$interval
		自定义服务:
			app.service('hexafy', function() {
			    this.myFunc = function (x) {
			        return x.toString(16);
			    }
			});
-->